<template>
	<view class="prop-mask" v-if="show">
		<view class="card-prop" :style="{width:width+'rpx'}">
			<view class="title flexR">
				<text>{{title}}</text>
				<u-icon v-if="closeIcon" name="close-circle" @click="$emit('close')" size="60rpx"></u-icon>
			</view>
			<view v-if="title" class="divider"></view>
			<slot name="content" class="content"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:{
				type:String,
				default:''
			},
			width:{
				type:Number,
				default:640
			},
			show:{
				type:Boolean,
				default:false
			},
			closeIcon:{
				type:Boolean,
				default:true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.prop-mask{
		height: calc(100vh);
		width: calc(100vw);
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}
	.card-prop{
		background-color: $uni-bg-color;
		border-radius: 15rpx;
		.title{
			margin: 0 20rpx;
			// border-bottom: 3rpx solid rgba($color: #d4d4d4, $alpha: .7);
			height: 100rpx;
			justify-content: space-between;
			align-items: center;
			color: $text-color-card-title;
			font-size: 34rpx;
		}
		.divider{
			margin: 0 20rpx;
			background-color: #d4d4d4;
			height: 2rpx;
		}
	}
</style>
